<template>
  <div class="allbk">
    <!-- 搜索栏 -->
    <div class="w100 querybox" :class="{ dark_querybox: settingsStore.isDark }"
      v-if="queryList.length > 0 && !detailListSear && state.queryList">
      <querybox @query="query" ref="queryboxRef" class="h100" :queryList="queryList" :queryTitle="queryTitle">
      </querybox>
    </div>
    <!-- 表格内容区 -->
    <div :style="{ height: 100 + '%' }" style="overflow: hidden;padding-bottom:30px"
      :class="{ dark_bg: settingsStore.isDark }" class="table_box w100">
      <div class="w100 fsc">
        <div class="crud_Box">
          <div :style="{ fontSize: store.sizeNum + 2 + 'px' }" style="display: flex;align-items: center;">
            <span style="font-size: 18px;font-weight: 700;">
              <slot name="selectName"></slot>
            </span>
            <span style="padding: 6px;" class="listInfoBtn" v-if="queryList.length > 0">
              <svg-icon style="margin-right: 0" icon-class="shaixuan" @click="shaixuanClick"></svg-icon>
            </span>
            <span v-if="refreshShow" style="font-size: 16px;margin-top: 4px;display: flex;
            align-items: center;line-height: 16px;margin-left: 20px;">
              <span>{{ refreshTime }}</span>
              <span style="margin-left: 20px;margin-right: 6px;">实时刷新</span>
              <el-switch @change="refreshChange" v-model="state.refreshShow" />
            </span>
          </div>
          <div class="crud_desc">
            <slot name="opraCurdBtnAll" v-if="state.modify"></slot>
            <el-popover trigger="click" placement="top-start">
              <div style="width: 100%;">
                <span @click="printDataClick(item)" class="selpover"
                  :class="state.printDataType == item.value ? 'active' : ''"
                  v-for="item in [{ label: '打印当前页', value: 1 }, { label: '打印全部页', value: 2 }]"
                  style="display: inline-block;padding: 6px 0;width: 100%;text-align: center;">
                  {{ item.label }}
                </span>
              </div>
              <template #reference>
                <span v-if="!noprintDownShow" :class="state.listBtnType == 3 ? 'listInfoBtn active' : 'listInfoBtn'
                  " @click="printBtnClick()">
                  <svg-icon :class="state.listBtnType == 3 ? 'active' : ''" class-name="search-icon"
                    icon-class="dayin" />
                  打印
                </span>
              </template>
            </el-popover>
            <el-popover trigger="click" placement="top-start">
              <div style="width: 100%;">
                <span  @click="downLoadDataClick(item)" class="selpover"
                  :class="state.downloadDataType == item.value ? 'active' : ''"
                  v-for="item in [{ label: '下载当前页', value: 1 }, { label: '下载全部页', value: 2 }]"
                  style="display: inline-block;padding: 6px 0;width: 100%;text-align: center;">
                  {{ item.label }}
                </span>
              </div>
              <template #reference>
                <span v-if="!noprintDownShow" :class="state.listBtnType == 4 ? 'listInfoBtn active' : 'listInfoBtn'
                  " @click="downLoadBtnClick()">
                  <svg-icon :class="state.listBtnType == 4 ? 'active' : ''" class-name="search-icon"
                    icon-class="xiazai" />
                  下载
                </span>
              </template>
            </el-popover>

            <tableSet :open_pageSet="state.open_pageSet" :height="state.tableHeight" :tableheads="tableheads"
              :refreshShow="state.refreshShowSwitch" @saveSet="saveSet" />
          </div>
        </div>
      </div>
            <slot name="tableHeightChange"></slot>
      <div class="w100 hhhhh" :style="{
        height: queryList.length > 0 && state.queryList ? state.queryHeight : 'calc(90% - 25px)',
      }">
        <vxe-table v-if="tableheads_show.length > 0 && !ismergethead" :class="{
          tableFontSize2: store.onlyStyle,
          tableFontSize: !store.onlyStyle,
          darkTheme: settingsStore.isDark,
        }" :header-row-class-name="store.onlyStyle ? 'header2' : 'header'" :loading="loading" height="auto" ref="xGrid"
          @filter-change="filterChangeEvent" @checkbox-all="checkchange" @checkbox-change="checkchange"
          :data="tabledata" :expand-config="expandConfig" :column-config="{ useKey: true, drag: true }"
          :column-drag-config="state.columnDragConfig" :row-config="{ isHover: true }" @resizable-change="resizeChange"
          @column-dragend="columnDragendEvent" :checkbox-config="{ highlight: true }" stripe border="inner"
          :key="tabledata" :cell-class-name="store.onlyStyle ? 'rowHeight2' : 'rowHeight'" @cell-click="cellClickEvent"
          :cell-style="cellStyleDiyColorFun">
          <vxe-column type="checkbox" field="checkbox" :width="50"></vxe-column>
          <vxe-column type="expand" field="expand" width="80" :fixed="expandFixed" v-if="expandFixed">
            <template #content="{ row, rowIndex }">
              <slot name="content" :row="row"></slot>
            </template>
          </vxe-column>
          <vxe-column type="seq" :width="50" title="序号" field="seq"></vxe-column>
          <vxe-column style="color:red;" v-for="(item, index) in tableheads_show" :field="item.field"
            :title="item.title" :params="{ name: item.name }" :width="item.width ? item.width : ''"
            :filters="item.options" :key="index" :sortable="item.sortable" :filter-method="fieldFilterMethod">
            <template v-if="item.listSS" #default="{ row }">
              <slot name="listSS" :row="row" :field="item.field"></slot>
            </template>
            <template v-if="item.listSS && item.filterdiy" #filter="{ column }">
              <slot name="listSSfilter" :row="column" :field="item.field"></slot>
            </template>
            <!-- 智能管控-钻场总览 -->
                   <template v-if="item.field == 'standardRate'" #default="{ row }">
                    <span>{{ row['standardRate']==0?'未达标':'已达标' }}</span>
            </template>
          </vxe-column>
          <vxe-column title="操作" field="modify" v-if="state.modify && !showCaozuo" :min-width="168" fixed="right">
            <template #default="{ row }">
              <slot name="opraCurdBtn" :row="row"></slot>
            </template>
          </vxe-column>
          <template #empty>
            <span class="nodataClass">
              <img src="@/assets/images/空白.png" />
              <p>暂未查询到结果</p>
            </span>
          </template>
        </vxe-table>
        <vxe-grid v-else @checkbox-all="checkchange" @checkbox-change="checkchange" ref="xGrid" v-bind="{
          border: 'inner',
          columns: tableheads_show,
          data: tabledata,
          align: 'center',
        }"></vxe-grid>
      </div>
    </div>
    <!-- 分页组件 -->
    <div v-if="!hidepage && pageconfig.total > 0" class="w100 pagevxe" style="height: 35px;">
      <el-pagination class=" globalFontSize" :class="{ pages: settingsStore.isDark }"
        v-model:current-page="pageconfig.currentPage" v-model:page-size="pageconfig.pageSize"
        :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
        :total="pageconfig.total" @size-change="pagechange" @current-change="pagechange"
        style="position: absolute; bottom: 16px; right: 16px" />
    </div>
    <!-- 下载和打印全部用 -->
    <vxe-grid v-show="false" ref="xGridAll" v-bind="{
      border: 'inner',
      columns: tableheads_show,
      data: allData,
      align: 'center',
    }"></vxe-grid>
  </div>
</template>
<script>
import querybox from "./querybox";
import tableSet from "./tableSet";
import Sortable from "sortablejs";
import {
  computed,
  nextTick,
  onActivated,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  inject,
} from "vue";
import {
  ElMessage,
  ElMessageBox,
  ElNotification
} from "element-plus";
import axios from "@/utils/request";
import {
  useRouter
} from "vue-router";
import {
  useStore
} from "vuex";
import usePagesStore from "@/store/modules/pages";
import useSettingsStore from "@/store/modules/settings";
import {
  getToken
} from "@/utils/auth";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const settingsStore = useSettingsStore();
import dayjs from "dayjs";
export default {
  name: "vxeTB",
  components: {
    querybox,
    tableSet,
  },
  props: {
        tableHeightChange:{
      default: () => false,
      type: Boolean
    },
    // 无打印和下载按钮
    noprintDownShow: {
      default: () => false,
      type: Boolean
    },
    // 用于历史查询模块复选框是选择的是上下哪个表格数据
    topbottomNum: {
      default: () => undefined,
      type: Number,
    },
    refreshShow: {
      default: () => false,
      type: Boolean,
    },
    queryTitle: {
      default: () => undefined,
      type: String,
    },
    showCaozuo: {
      default: () => false,
      type: Boolean,
    },
    loading: {
      default: () => false,
      type: Boolean,
    },
    ismergethead: {
      default: () => undefined,
      require: true,
    },
    tabledata: {
      default: () => [],
      require: true,
    },
    tableheads: {
      default: () => [],
      require: true,
    },
    allData: {
      default: () => [],
    },
    queryList: {
      default: () => [],
    },
    listSS: {
      default: () => [],
    },
    pageconfig: {
      default: () => {
        return {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        };
      },
      require: true,
    },
    // 展开
    expandFixed: {
      default: () => false,
      type: Boolean,
    },
    hidepage: {
      default: () => false,
      type: Boolean,
    },
    detailListSear: {
      default: () => false,
      type: Boolean,
    },
    hidesetting: {
      default: () => false,
      type: Boolean,
    },
    refreshTime: {
      default: () => '',
      type: String,
    },
    ismergethead: {
      default: () => false,
      type: Boolean,
    },
  },
  setup(props, {
    emit
  }) {
    const store = usePagesStore();
    const router = useRouter();
    const storageSetting2 = JSON.parse(localStorage.getItem("layout-set"));
    let xGrid = ref(null);
    let xGridAll = ref(null);
    let queryboxRef = ref(null);
    let state = reactive({
      downloadDataType: undefined,
      printDataType: undefined,
      listBtnType: undefined,
      columnDragConfig: {
        isCrossDrag: true,
        showGuidesStatus: true,
        showIcon: false,
        trigger: 'cell'
      },
      modify: userStore.modify,
      vxeHeight: 500,
      tableHeight: 0,
      open_pageSet: false,
      personPhotoInfo: "",
      records: [],
      queryList: true,
      queryHeight: 0,
      refreshShow: false,
      refreshShowSwitch: 1,
      formDataPageStyle: {}
    });

    let pageSets = reactive({
      fontSizes: [{
        value: "12px",
        label: "12px",
      },
      {
        value: "14px",
        label: "14px",
      },
      {
        value: "16px",
        label: "16px",
      },
      {
        value: "18px",
        label: "18px",
      },
      ],
      options: [{
        value: "1s",
        label: "1s",
      },
      {
        value: "2s",
        label: "2s",
      },
      {
        value: "3s",
        label: "3s",
      },
      {
        value: "4s",
        label: "4s",
      },
      ],
      rowHeight: [{
        value: "24px",
        label: "24px",
      },
      {
        value: "32px",
        label: "32px",
      },
      {
        value: "40px",
        label: "40px",
      },
      {
        value: "48px",
        label: "48px",
      },
      {
        value: "56px",
        label: "56px",
      },
      ],
    });
    let colorHeader = ref();
    let colorRow = ref();
    let colorVLine = ref();
    let colorHLine = ref();
    let xTable1 = ref();
    // 选择表头颜色
    const clickColorHeader = () => {
      colorHeader.value.show();
    };
    // 选择间隔行颜色
    const clickColorRow = () => {
      colorRow.value.show();
    };
    // 选择水平线
    const clickColorVLine = () => {
      colorVLine.value.show();
    };
    // 选择垂直线
    const clickColorHLine = () => {
      colorHLine.value.show();
    };
    const formData = ref({});
    const expandConfig = ref({
      visibleMethod({
        row
      }) {
        if (
          row.sensorSimulateChildList == null &&
          row.sensorSwitchChildList == null &&
          row.sensorAddChildList == null
        ) {
          return false;
        } else {
          return true;
        }
      },
    });
    // 保存样式到本地
    const saveLocal = () => {
      // document.querySelector(".vxe-table--render-default .vxe-body--row.row--stripe").style.setProperty("background-color", "red", "important")
      document
        .querySelector(":root")
        .style.setProperty("--pageFont-size", formData.value.tableSize);
      document
        .querySelector(":root")
        .style.setProperty("--pageRow-height", formData.value.tableHeight);
      if (formData.value.tableHeadColorStatus) {
        document
          .querySelector(":root")
          .style.setProperty(
            "--pageHeader-bg",
            formData.value.tableHeadColorValue
          );
      } else {
        document
          .querySelector(":root")
          .style.setProperty("--pageHeader-bg", "#E6EEFD");
      }
      if (formData.value.intervalLineColorStatus) {
        document
          .querySelector(":root")
          .style.setProperty(
            "--pageStripe-bg",
            formData.value.intervalLineColorValue
          );
        document
          .querySelector(":root")
          .style.setProperty(
            "--isStripe-bg",
            formData.value.intervalLineColorValue
          );
      }
      let pageStyle = {
        fontSize: formData.value.tableSize,
        rowHeight: formData.value.tableHeight,
        headerBg: formData.value.tableHeadColorValue,
        stripeBg: formData.value.intervalLineColorValue,
        isStripeBg: formData.value.intervalLineColorValue,
      };
      localStorage.setItem("page-style", JSON.stringify(pageStyle));
    };
    let sortable1;
    const rowDrop = () => {
      const $table = xTable1.value;
      sortable1 = Sortable.create(
        $table.$el.querySelector(".body--wrapper>.vxe-table--body tbody"), {
        handle: ".drag-btn",
        onEnd: (sortableEvent) => {
          const newIndex = sortableEvent.newIndex;
          const oldIndex = sortableEvent.oldIndex;
          const currRow = props.tableheads.splice(oldIndex, 1)[0];
          props.tableheads.splice(newIndex, 0, currRow);
        },
      }
      );
    };

    // 数组去重
    function unique(arr, key) {
      const res = new Map();
      return arr.filter((a) => !res.has(a[key]) && res.set(a[key], 1));
    }
    let tableheads_show = computed(() => {
      props.tableheads.forEach((item) => {
        props.listSS.forEach((item1) => {
          if (item.field == item1.field) {
            item.listSS = true;
          }
          if (item1.filterField) {
            if (item.field == item1.filterField.field) {
              item.options = item1.filterField.options;
              item.sortable = item1.filterField.sortable;
              item.filterdiy = item1.filterField.filterdiy;
            }
          }
        });
      });
      if (props.ismergethead) {
        const result = classifyArrays(props.tableheads, props.ismergethead, 'field');
        return result
      } else {
        return unique(
          props.tableheads.filter((i) => i.show === 1),
          "field"
        );
      }
    });
    // 表格筛选
    function cellStyleDiyColorFun({ row }) {
      return { color: row.fontColor + '!important' }
    }

    function classifyArrays(mainArray, filterArray, fieldName) {
      const tree = [];
      const containsValues = [];
      const notContainsValues = [];
      filterArray.forEach(category => {
        const node = {
          field: category.value,
          children: []
        };
        // 筛选属于当前分类的数据项
        const itemsInCategory = mainArray.filter(item => (item.field).includes(category.value));
        node.name = itemsInCategory.length > 0 && itemsInCategory[0].name
        node.title = category.label
        node.children = itemsInCategory;
        // 将节点添加到树中
        tree.push(node);
      });
      mainArray.forEach(item => {
        const fieldValue = item[fieldName];
        const isContained = filterArray.some(filterValue => {
          return fieldValue.includes(filterValue.value);
        });
        if (isContained) {
          containsValues.push(item);
        } else {
          notContainsValues.push(item);
        }
      });
      let newdata = notContainsValues.concat(tree)
      return newdata
    }

    // 查询数据
    function query(val) {
      if (val == 3) {
        state.queryList = false;
      }
      emit("query", val);
    }

    function shaixuanClick() {
      state.queryList = true;
    }
    // 改变分页
    function pagechange() {
      emit("pagechange", props.pageconfig);
    }
    function filterChangeEvent(val) {
      emit("filterChangeEvent", val);
    }

    function checkchange(e) {
      e.records.forEach(item => {
        item.topbottomNum = props.topbottomNum
      })
      state.records = e.records;
      store.records = e.records;
    }

    /**
     * 列表设置
     * @param {*} fullColumn
     */
    function setHeaders(fullColumn) {
      let newfullColumn = fullColumn.filter((item) => {
        return item.params !== undefined;
      });
      axios.post(
        "/drainage/vxeheaders/setHeaders",
        newfullColumn.map((item, index) => {
          return {
            name: item.params.name,
            width: String(item.width),
            type: item.type,
            field: item.field,
            title: item.title,
            sort: String(index),
            show: "1",
          };
        })
      );
    }

    function resizeChange(e) {
      const {
        fullColumn
      } = e.$table.getTableColumn();
      fullColumn[e.columnIndex].width = fullColumn[e.columnIndex].renderWidth;
      setHeaders(fullColumn);
    }

    function saveSet(data) {
      state.formDataPageStyle = data
      state.refreshShow = data.refresh
      // 列表设置传值
      emit('saveSetpageStyle', data)
      state.open_pageSet = false;
      const {
        fullColumn
      } = xGrid.value.getTableColumn();
      setHeaders(fullColumn);
    }

    function refreshChange(val) {
      state.formDataPageStyle.refresh = val
      emit('saveSetpageStyle', state.formDataPageStyle)
      if (state.formDataPageStyle.autoPagerChrome && state.formDataPageStyle.flipInterval == null) {
        ElMessage.warning('请选择翻页间隔')
      } else {
        state.formDataPageStyle.mark = props.tableheads[0].name;
        axios.post("/page/edit/update", state.formDataPageStyle).then((res) => {
          if ((res.code = 200)) {
            ElMessage.success(res.msg);
          }
        });
      }
    }

    function setVxeHeight() {
      let allbk = document.getElementsByClassName("allbk")[0];
      let querycss = document.getElementsByClassName("querycss")[0];
      state.tableHeight = allbk.getBoundingClientRect().height - 41;
      if (querycss) {
        let ttt = querycss.getBoundingClientRect().height + 35;
        //判断当前路由是否是管网总览页面
        if ( props.tableHeightChange) {
        state.queryHeight = "calc(70% - " + ttt + "px)";
        }else{
        state.queryHeight = "calc(90% - " + ttt + "px)";
        }
        state.vxeHeight =
          allbk.getBoundingClientRect().height -
          querycss.getBoundingClientRect().height -
          105;
      } else {
        state.vxeHeight = allbk.getBoundingClientRect().height;
        state.queryHeight = "calc(90% - 0px)";
      }
    }
    // 列拖拽换位
    function columnDragendEvent({
      newColumn,
      oldColumn
    }) {
      console.log(newColumn, oldColumn, 'newColumn, oldColumn新旧');

    }

    function columnDrop(dom) {
      Sortable.create(
        dom.$el.querySelector(
          ".body--wrapper>.vxe-table--header .vxe-header--row"
        ), {
        handle: ".vxe-header--column:not(.col--fixed)",
        onEnd: (sortableEvent) => {
          const targetThElem = sortableEvent.item;
          const newIndex = sortableEvent.newIndex;
          const oldIndex = sortableEvent.oldIndex;
          const {
            fullColumn,
            tableColumn
          } = dom.getTableColumn();
          const wrapperElem = targetThElem.parentNode;
          const newColumn = fullColumn[newIndex];
          if (newColumn.fixed) {
            // 错误的移动
            const oldTrElement = wrapperElem.children[oldIndex];
            if (newIndex > oldIndex) {
              wrapperElem.insertBefore(targetThElem, oldTrElement);
            } else {
              wrapperElem.insertBefore(oldTrElement, targetThElem);
            }
            ElMessage.error("不能拖动固定列");
          }
          // 转换真实索引
          const oldColumnIndex = dom.getColumnIndex(tableColumn[oldIndex]);
          const newColumnIndex = dom.getColumnIndex(tableColumn[newIndex]);
          // 移动到目标列
          const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
          fullColumn.splice(newColumnIndex, 0, currRow);
          dom.loadColumn(fullColumn);
          setHeaders(fullColumn);
        },
      }
      );
    }
    let initTime;
    nextTick(() => {
      // 加载完成之后在绑定拖动事件
      // if(xGrid.value!=null){
      //   initTime = setTimeout(() => {
      // console.log(xGrid.value,'xGrid.value');
      //     columnDrop(xGrid.value);
      //   }, 500);
      // }
    });

    function cellClickEvent(row) {
      emit("cellClickEvent", row.row);
    }
    // 全局打印
    function printBtnClick() {
      state.listBtnType = 3
    }
    function downLoadBtnClick() {
      state.listBtnType = 4
    }
    // 打印当前和全部数据
    function printDataClick(item) {
      state.printDataType = item.value
      if (item.value == 2) {
        emit("printDataClick", item.value);
        setTimeout(() => {
          const $table = xGridAll.value
          $table.print()
        }, 1000)
      } else {
        const $table = xGrid.value
        $table.print()
      }
    }
    // 下载当前和全部数据
    function downLoadDataClick(item) {
      state.downloadDataType = item.value
      if (item.value == 2) {
        emit("downLoadDataClick", item.value);
        setTimeout(() => {
          const $table = xGridAll.value
          $table.exportData({
            filename: "全部页下载数据",
            sheetName: "Sheet1",
            type: "xlsx",
          })
        }, 1000)
      } else {
        const $table = xGrid.value
        $table.exportData({
          filename: "当前页下载数据",
          sheetName: "Sheet1",
          type: "xlsx",
        })
      }
    }
    watch(() => settingsStore.isDark, () => {
      if (settingsStore.isDark) {
        document.querySelector(':root').style.setProperty('--el-bg-color-overlay', '#386c96');
        document.querySelector(':root').style.setProperty('--el-fill-color-light', 'rgba(91, 109, 128, 0.02)');
        document.querySelector(':root').style.setProperty('--el-text-color-regular', 'rgba(62, 70, 79, 1)');
      } else {
        document.querySelector(':root').style.setProperty('--el-bg-color-overlay', '#fff');
        document.querySelector(':root').style.setProperty('--el-fill-color-light', 'rgba(91, 109, 128, 0.02)');
        document.querySelector(':root').style.setProperty('--el-text-color-regular', '#606266');
      }
    })
    onMounted(() => {
      if (props.queryList.length > 0) { }
      setVxeHeight();
      window.onresize = () => {
        setVxeHeight();
      };
    });
    return {
      downLoadDataClick,
      xGridAll,
      printDataClick,
      printBtnClick,
      downLoadBtnClick,
      cellStyleDiyColorFun,
      filterChangeEvent,
      columnDragendEvent,
      refreshChange,
      cellClickEvent,
      shaixuanClick,
      expandConfig,
      unique,
      saveSet,
      tableheads_show,
      state,
      emit,
      router,
      resizeChange,
      xGrid,
      pagechange,
      query,
      store,
      getToken,
      checkchange,
      storageSetting2,
      pageSets,
      formData,
      colorHeader,
      colorRow,
      colorVLine,
      colorHLine,
      clickColorHeader,
      clickColorRow,
      clickColorVLine,
      clickColorHLine,
      saveLocal,
      xTable1,
      rowDrop,
      sortable1,
      columnDrop,
      settingsStore,
    };
  },
};
</script>

<style lang="scss" scoped>
.selpover {
  cursor: pointer;
  font-size: 15px;

  &.active {
    background-color: rgba(91, 109, 128, 0.08);
    color: cornflowerblue;
  }
}

.pages {

  // 上下页按钮
  :deep(.btn-next),
  :deep(.btn-prev) {
    background: rgba(91, 109, 128, 0.08) !important;
  }
}
</style>
<style lang="scss">
/* 深色主题整体样式 */
.darkTheme {
  background-color: transparent;
  /* 表格整体背景色 */
  color: rgba(62, 70, 79, 1);
  /* 默认文字颜色 */
  --vxe-table-border-color: transparent;
  --vxe-table-header-background-color: transparent;
}

/* 表头样式 */
.darkTheme .vxe-header--row {
  background-color: rgba(68, 136, 255, .12) !important;
  /* 表头背景色 */
  color: rgba(62, 70, 79, 1) !important;
}

/* 单元格样式 */
.darkTheme .vxe-body--column {
  background-color: transparent;
  /* 单元格背景色 */
  color: rgba(62, 70, 79, 1);
  border-bottom: none;
  /* 单元格底部边框 */
}

/* 行悬停效果 */
.darkTheme .vxe-body--row:hover .vxe-body--column {
  background-color: transparent;
  /* 悬停行背景色 */
}

/* 边框颜色调整 */
.darkTheme .vxe-table--border-line {
  border-color: transparent;
  /* 表格外边框颜色 */
}

.darkTheme .vxe-table--body-wrapper {
  background-color: transparent;
}

.dark_bg {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: -2px 0px 20px rgba(91, 109, 128, 0.08) !important;
  color: rgba(62, 70, 79, 1);
}

.dark_querybox {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: -2px 0px 20px rgba(91, 109, 128, 0.08);
  color: rgba(62, 70, 79, 0.8) !important;

  .globalFontSize {
    color: rgba(62, 70, 79, 0.8) !important;
  }
}

.querybox {
  margin: 0 0 10px 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: -6px 2px 6px rgba(0, 0, 0, 0.02);
}

.table_box {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px 8px 8px 8px;
  padding: 10px;
  box-shadow: -6px 2px 6px rgba(0, 0, 0, 0.02);
  position: relative;
}

.pagevxe {
  position: absolute;
  right: 16px;
  bottom: -10px;
  // background-color: rgba(255, 255, 255, 1);
  box-shadow: -6px 2px 6px rgba(0, 0, 0, 0.02);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  max-width: 490px;
}

.crud_Box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px 0;

  h3 {
    font-size: 16px;
    font-weight: 700;
  }

  .crud_desc {
    color: rgba(62, 70, 79, 1);

    .btn {
      margin: 0 10px;
    }

    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.el-steps--horizontal {
  display: contents;
}

.hide .el-upload--picture-card {
  display: none;
}
</style>
<style lang="scss">
.sortable-row-demo .drag-btn {
  cursor: move;
  // font-size: 16px;
}

@import "@/assets/styles/page-edit.scss";

.vxe-table--render-default .vxe-body--row.row--stripe {
  @if $isStripe-bg=="#000" {
    background-color: #{$stripe-bg};
  }

  @if $isStripe-bg !="#000" {
    background-color: #{$stripe-bg2};
  }

  // background-color: #{$stripe-bg};
  // background-color: #{$stripe-bg};
  /* 修改为你想要的背景色 */
}

// 表格设置
.set_box {
  padding: 16px;
  height: 760px;
  display: flex;
  justify-content: space-between;

  .nav {
    padding: 8px;
    width: 120px;
    height: 100%;
    background-color: #f7f7f8;
    border-radius: 4px;
    font-size: 16px;

    .item {
      padding: 6px 12px;
      height: 36px;
    }
  }

  .container {
    width: 576px;
    height: 100%;

    .title {
      font-weight: 700;
    }

    .title2 {
      font-weight: 400;
      margin: 0 12px 0 0;
    }

    .box_one {
      margin: 14px 0 0 0;
      height: 68px;
      font-size: 16px;

      .item_box {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: space-between;

        .item {
          display: flex;
          align-items: center;
          height: 32px;
        }
      }
    }

    .box_two {
      margin: 32px 0 0 0;

      .item_box {
        width: 100%;
        height: 80px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
          display: flex;
          align-items: center;

          .color_switch {
            display: flex;

            .color {
              margin-right: 16px;
              padding: 4px;
              width: 100px;
              height: 32px;
              background-color: #f0f7ff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;

              .color_box {
                width: 71px;
                height: 24px;
              }
            }

            .colorHeader {
              inset: 145px auto auto 25px !important;
            }

            .colorRow {
              inset: 145px auto auto 370px !important;
            }

            .colorVLine {
              inset: 185px auto auto 25px !important;
            }

            .colorHLine {
              inset: 185px auto auto 370px !important;
            }

            ::v-deep .color5 {
              inset: 330px auto auto 25px !important;
            }
          }
        }
      }
    }

    .box_three {
      margin: 32px 0 0 0;
    }

    .box_four {
      margin: 32px 0 0 0;
    }

    .btns {
      margin: 28px 0 0 0;
      display: flex;
      justify-content: space-between;
    }
  }
}

// 禁止选择
.disableselect:hover {
  cursor: not-allowed !important;
}

.biaogeshezhi {
  .vxe-table--body-wrapper.body--wrapper {
    // box-shadow: 0px -10px 10px #ccc inset
  }

  .title {
    font-weight: 700;
  }

  .title2 {
    font-weight: 400;
    margin: 0 12px 0 0;
  }

  .box_one {
    height: 68px;
    font-size: 16px;

    .item_box {
      width: 100%;
      height: 32px;
      display: flex;
      justify-content: space-between;

      .item {
        display: flex;
        align-items: center;
        height: 32px;
      }
    }
  }

  .box_two {
    height: 112px;
    font-size: 16px;

    .item_box {
      width: 100%;
      height: 80px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        display: flex;
        align-items: center;

        .color_switch {
          display: flex;

          .color {
            margin-right: 16px;
            padding: 4px;
            width: 100px;
            height: 32px;
            background-color: #f0f7ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .color_box {
              width: 71px;
              height: 24px;
            }
          }

          .colorHeader {
            inset: 145px auto auto 25px !important;
          }

          .colorRow {
            inset: 145px auto auto 370px !important;
          }

          .colorVLine {
            inset: 185px auto auto 25px !important;
          }

          .colorHLine {
            inset: 185px auto auto 370px !important;
          }

          ::v-deep .color5 {
            inset: 330px auto auto 25px !important;
          }
        }
      }
    }
  }

  .btns_footer {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.boxddd {
  margin-left: -10px;
  // border-bottom: 1px solid #E7E7E7;
  padding: 1px 0 1px 10px;
  width: 140%;
  text-align: left;
}

.leftpart {
  margin-left: 12%;
  width: 350px;
  overflow: scroll;
}

.rightpart {
  flex: 1;
  width: calc(100% - 125px);
}

.allbk {
  height: 100%;
  position: relative;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  border-radius: 8px;
}

.height100p {
  height: calc(100% - 5px) !important;
}

.height100p-100 {
  height: calc(100% - 100px);
}

.height100p-50 {
  height: calc(100% - 50px);
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.vmodel_mulu {
  position: absolute;
  top: 100px;
  left: 300px;
  width: 500px;
  height: 500px;
  background: #cccccc;
  border: 1px solid #1d376b;
}
</style>